<template>

  <div>
<!--    <dv-flyline-chart-enhanced :config="config" :dev="true" style="width:550px;height:550px;" >-->
    <Chart :cdata="cdata" />
<!--    </dv-flyline-chart-enhanced>-->
  </div>

</template>

<script>
import Chart from "./chart.vue";
import request from "../../../../utils/request";
import {getCoord} from "../../../../utils/getCoord";
export default {
  name: 'fuzhouIndex',
  data () {
    return {
      isHistoryObj: {},
      cdata: {
        mapDataArr:  [
          {
            // 名字需要与 “common/map/maps.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
            name: '福州市',
            value: 999,
            elseData:{
              // 这里放置地图 tooltip 里想显示的数据
            }
          },
          {
            name: '厦门市',
            value: 9,
          },
          {
            name: '漳州市',
            value: 8,
          },
          {
            name: '泉州市',
            value: 7,
          },
          {
            name: '三明市',
            value: 6,
          },
          {
            name: '莆田市',
            value: 5,
          },
          {
            name: '南平市',
            value: 4,
          },
          {
            name: '龙岩市',
            value: 3,
          },
          {
            name: '宁德市',
            value: 2,
          }
        ],
        lineStyleArr: []
      }

    }
  },
  //自定义isHistory属性，用于监听日期的变化
  props: {
    isHistory: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    isHistory: {
      handler(newData){
        // console.log("isHistory属性改变了！=》",newData)
        this.isHistoryObj = newData
        if (newData.isHistoryMode){
            let provinceMapData = request.get("/bigScreen/provinceMapData",{date: newData.date})
            let flyLineData = request.get("/bigScreen/flyLineData",{date: newData.date})
            Promise.all([provinceMapData,flyLineData]).then(data=>{
              console.log("Promise all data =>",data)
              return new Promise((resolve, reject) => {//这地方好像没必要
                if (data[1].success) {
                  let lineDataArr = data[1].result
                  // lineDataArr,是一个数组，每个对象有起止城市名，和百分比
                  // 针对每一个对象定制Echart样式
                  this.cdata.lineStyleArr = [] //重置飞线
                  for(let item of lineDataArr){
                    this.cdata.lineStyleArr.push({
                      type: 'lines',
                      coordinateSystem: 'geo',
                      zlevel: 2,
                      //箭头图标
                      effect: {
                        show: true,
                        period: 10, //箭头指向速度，值越小速度越快
                        trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标
                        symbolSize: item.value / 3 , //图标大小
                        color: 'rgba(245,225,17,0.5)', // 图标颜色
                      },
                      lineStyle: {
                        normal: {
                          show: true,
                          width: 2, //尾迹线条宽度
                          opacity: 0.2, //尾迹线条透明度
                          curveness: 0.3, //尾迹线条曲直度
                          color: 'rgba(238,214,15,0.5)', // 飞线颜色
                        },
                        color: '#ff0000',//这个属性好像没啥用
                      },
                      // 应该是传入全国数据集
                      //每个元素是一个数组，每个数组有出发点对象和目的点对象,第一个是出发点
                      data: [
                        [{coord: getCoord(item.cityName)},//泉州到福州
                          {coord: getCoord(item.targetCity)}
                        ]
                      ],

                    })
                  }
                  resolve()
                }
              }).then(()=>{
                //处理地图数据
                if (data[0].success){
                  // console.log("provinceMapData=>",res)
                  for (let i = 0; i < this.cdata.mapDataArr.length; i++) {
                    this.cdata.mapDataArr[i].value = data[0].result[i]
                  }
                }
                else {
                  this.$message.error(data[0].message)
                }
              })
            })
        }
      },
      immediate: true,
      deep: true,
    }
  },
  components: {
    Chart,
  },
  mounted() {
    let that = this
    this.ws = this.$store.state.websocketModule.ws
    this.ws.subscribe('/bigScreen/provinceMapData', function (message){//有教程说topic前面必须带一个/user前缀，但是我没加也没事啊
      for (let i = 0; i < that.cdata.mapDataArr.length; i++) {
        that.cdata.mapDataArr[i].value = JSON.parse(message.body)[i]
      }
    });
    this.ws.subscribe('/bigScreen/flyLineData',function (message){
      let lineDataArr = JSON.parse(message.body)
      // console.log("lineArr=>",lineDataArr)
        // lineDataArr,是一个数组，每个对象有起止城市名，和百分比
        // 针对每一个对象定制Echart样式
      that.cdata.lineStyleArr = [] //接受到新数据的时候重置之前的飞线
        for(let item of lineDataArr){
          that.cdata.lineStyleArr.push({
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 2,
            //箭头图标
            effect: {
              show: true,
              period: 10, //箭头指向速度，值越小速度越快
              trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: item.value / 3 , //图标大小
              color: 'rgba(245,225,17,0.5)', // 图标颜色
            },
            lineStyle: {
              normal: {
                show: true,
                width: 2, //尾迹线条宽度
                opacity: 0.2, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
                color: 'rgba(238,214,15,0.5)', // 飞线颜色
              },
              color: '#ff0000',//这个属性好像没啥用
            },
            // 应该是传入全国数据集
            //每个元素是一个数组，每个数组有出发点对象和目的点对象,第一个是出发点
            data: [
              [{coord: getCoord(item.cityName)},//泉州到福州
                {coord: getCoord(item.targetCity)}
              ]
            ],

          })
        }

    })
  },
  methods: {
    setCdata(){

    }
  },
};
</script>

<style lang="scss" scoped>
</style>